/* CSS Document */
.mid{width:100%;height:22rem;clear:both;background:url(../image/mid.jpg) center top;background-size:cover;}
.mid .midtit{float:right;width:30%;}
.mid .midtit h1{float:right;text-align:right;font-size:5.5rem;line-height:2;color:#fff;margin-top:10%;}
.mid .midtit p{float:right;text-align:right;font-size:2.4rem;color:#fff;clear: both;line-height:1.6;}
.mid .midmm{width:66%;float:left;}
.mid .midmm ul{ width:100%;height:auto;margin:0 auto;margin-top:5%; }
.mid .midmm ul li{width:18%;height:auto;float:left;position:relative;transition: all 0.6s; -ms-transition: all 0.8s;margin-left:1%;margin-right: 1%;overflow:hidden;}
.mid .midmm ul li .m1{width:100%;height:100%;transition-property: all; transition-duration: 1s;transition-delay: 0s, 0.5s, 0s;opacity: 1;}
.mid .midmm ul li .m2{position:absolute;left:0px;top:-135px;opacity: 0;width:100%;height:100%;transition-property: all; transition-duration: 1s;transition-delay: 0s, 0.5s, 0s}




.mid .midmm ul li p{color:#fff;text-align:center;position:absolute;top:70%;left:0%;font-size:2.2rem;width:100%;}
.mid .midmm ul li:hover{background-position:top !important;transition: all 0.6s; -ms-transition: all 0.8s;opacity:1;}
.mid .midmm ul li:hover p{color:#1952be;transition: all 0.6s; -ms-transition: all 0.8s;opacity:1;}
.mid .midmm ul li:hover .m2{left:0px;top:0px;opacity: 1;transition-property: all; transition-duration: 1s;transition-delay: 0s, 0.5s, 0s;}
.mid .midmm ul li:hover .m1{opacity: 0;transition-property: all; transition-duration: 2s;transition-delay: 0s, 0.5s, 0s;}




@media only screen and (max-width:368px){
.mid{height:auto;background-size:cover;}
.mid .midtit{width:100%;}
.mid .midtit h1{text-align:center;font-size:3rem;float:none;width:100%;}
.mid .midtit p{text-align:center;font-size:1.8rem;float:none;width:100%;}
.mid .midmm{width:100%;float:none;}
.mid .midmm ul li{width:40%;margin-left:5%;margin-right:5%;margin-top:1rem;}
.mid .midmm ul li p{font-size:1.8rem;}


}



@media (min-width:341px) and (max-width:438px){
.mid{height:auto;background-size:cover;}
.mid .midtit{width:100%;}
.mid .midtit h1{text-align:center;font-size:3rem;float:none;width:100%;}
.mid .midtit p{text-align:center;font-size:1.8rem;float:none;width:100%;}
.mid .midmm{width:100%;float:none;}
.mid .midmm ul li{width:40%;margin-left:5%;margin-right:5%;margin-top:1rem;}
.mid .midmm ul li p{font-size:1.8rem;}


}



@media (min-width:439px) and (max-width:570px){
.mid{height:auto;background-size:cover;}
.mid .midtit{width:100%;}
.mid .midtit h1{text-align:center;font-size:3rem;float:none;width:100%;}
.mid .midtit p{text-align:center;font-size:1.8rem;float:none;width:100%;}
.mid .midmm{width:100%;float:none;}
.mid .midmm ul li{width:32%;margin-left:9%;margin-right:9%;margin-top:1rem;}
.mid .midmm ul li p{font-size:1.8rem;}


}

@media (min-width:571px) and (max-width:768px){
.mid{height:auto;background-size:cover;}
.mid .midtit{width:100%;}
.mid .midtit h1{text-align:center;font-size:3rem;float:none;width:100%;}
.mid .midtit p{text-align:center;font-size:1.8rem;float:none;width:100%;}
.mid .midmm{width:100%;float:none;}
.mid .midmm ul li{width:28%;margin-left:11%;margin-right:11%;margin-top:1rem;}
.mid .midmm ul li p{font-size:1.8rem;}


}

@media (min-width:769px) and (max-width:990px){
.mid .midtit{display:none;}
.mid .midmm{width:100%;float:none;}
.mid .midmm ul li{margin-left: 3%;margin-right: 3%;width:19%;}
}


@media (min-width:990px) and (max-width:1220px){

.mid .midtit h1{font-size:4rem;}
.mid .midtit p{font-size:1.8rem;}
.mid .midmm ul li p{font-size:1.6rem;}

}



@media (min-width:1221px) and (max-width:1440px){
.mid .midtit h1{font-size:4rem;}
.mid .midtit p{font-size:1.8rem;}
.mid .midmm ul li p{font-size:1.6rem;}
}